<template>
  <view class="background-image-container">
    
    <view class="ss-flex ss-row-center m-b-32">
      <image class="logo" :src="sheep.$url.static('/assets/img/register-logo.png')"></image>
    </view>
    <uni-forms
      ref="smsLoginRef"
      v-model="formData"
      validateTrigger="bind"
      labelWidth="140"
      cursor-color="#fff"
      labelAlign="center"
      style="padding: 0 70rpx; margin-top: 40rpx"
    >
      <view class="ss-flex m-b-32">
        <view class="form-title font-ALIMAMASHUHEITIBOLD">手机号</view>
        <uni-easyinput
          placeholder="输入手机号"
          class="inputBox font-ALIMAMASHUHEITIBOLD"
          style="
            color: #999999;
            background: #ffffff;
            padding: 10rpx 30rpx;
            max-width: calc(100vw - 200rpx);
          "
          v-model="formData.mobile"
          placeholder-style="color:#999999;font-size:24rpx"
          color="#fff"
          type="number"
          :inputBorder="false"
          maxlength="11"
          @input="input"
        >
        </uni-easyinput>
      </view>
      <view class="ss-flex m-b-32">
        <view class="form-title font-ALIMAMASHUHEITIBOLD">验证码</view>
        <uni-easyinput
          class="inputBox font-ALIMAMASHUHEITIBOLD"
          style="color: #999999; padding: 10rpx 30rpx; max-width: calc(100vw - 200rpx)"
          placeholder="输入验证码"
          v-model="formData.code"
          :inputBorder="false"
          placeholder-style="color:#999999;font-size:24rpx"
          type="number"
          maxlength="4"
          @input="input"
        >
          <template v-slot:right>
            <button
              style="color: #5350f1"
              class="ss-reset-button code-btn code-btn-start font-ALIMAMASHUHEITIBOLD"
              :disabled="false"
              @tap="sendCode()"
            >
              {{ getSmsTimer('smsLogin') }}
            </button>
          </template>
        </uni-easyinput>
      </view>
      <view class="ss-flex">
        <view class="form-title font-ALIMAMASHUHEITIBOLD">邀请码</view>
        <uni-easyinput
          placeholder="请输入邀请码"
          class="inputBox font-ALIMAMASHUHEITIBOLD"
          style="
            color: #999999;
            background: #ffffff;
            padding: 10rpx 30rpx;
            max-width: calc(100vw - 200rpx);
          "
          v-model="formData.inviteId"
          placeholder-style="color:#999999;font-size:24rpx"
          color="#fff"
          :disabled='!!id'
          type="number"
          :inputBorder="false"
          maxlength="11"
          @input="input"
        >
        </uni-easyinput>
      </view>
    </uni-forms>
    <view class="ss-flex ss-row-center" @click="login('smsLogin')">
      <image class="register-btn" :src="sheep.$url.static('/assets/img/reginster-btn.png')"></image>
    </view>
    <view class="text1">下载 朱雀兽 APP</view>
    <view class="text2">今天你养雀 明天雀养你</view>
    <view class="ss-flex ss-row-center m-b-32" @click="dump('ios')">
      <image
        class="register-phone"
        :src="sheep.$url.static('/assets/img/register-iphone.png')"
      ></image>
    </view>
    <view class="ss-flex ss-row-center m-b-32" @click="dump('android')">
      <image
        class="register-phone"
        :src="sheep.$url.static('/assets/img/register-anzhuo.png')"
      ></image>
    </view>
	<a href="https://beian.miit.gov.cn" class="text3">浙ICP备2024112235号-2</a>
  </view>
</template>

<script setup>
  import { reactive, ref, computed } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import AuthUtil from '@/sheep/api/member/auth';
  // #ifdef H5
  import { isWxBrowser } from '@/sheep/helper/utils';
  // #endif
  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
  });
  let authType = ref('');
  const formData = reactive({
    mobile: '',
    code: '',
    inviteId: '',
  });
 
  const smsLoginRef = ref(null);
  const loginBtnDisable = ref(true);
  let buttonColor = ref('blue');

  const customStyle = {
    width: '60%',
    marginTop: '20px',
    color: '#fff',
    border: 'none',
    background: '#5350F1',
    height: '110rpx',
    borderRadius: '10rpx',
  };

  onLoad(() => {
    formData.inviteId = props.id;
    // let url = window.location.href;
    // let requestParams = {};
    // if (url.indexOf('?') !== -1) {
    //   let str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
    //   console.log(str, '?后面的内容');
    //   let strs = str.split('&'); //将字符串内容以&分隔为一个数组
    //   console.log(strs, '以&切割的数组');
    //   for (let i = 0; i < strs.length; i++) {
    //     requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
    //     // 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
    //   }
    //   formData.inviteId = requestParams.inviteId ? requestParams.inviteId : '';
    //   console.log('---', requestParams);
    // }
  });

  // 监听输入框 输入合规手机号和验证码时 按钮才点亮 否则置灰
  function input() {
    setTimeout(function() {
      let reg = /^1[3-9]\d{9}$/;
      loginBtnDisable.value = !(reg.test(formData.mobile) && formData.code.length === 4);
    }, 0);
  }

  function sendCode() {
    if (formData.mobile) {
      getSmsCode('smsLogin', formData.mobile);
    } else {
      sheep.$helper.toast('请输入手机号');
    }
  }

  const dump = (type) => {
    sheep.$router.go('/pages/index/introduce', {
      type,
    });
  };




  const login = async (e) => {
    let reg = /^1[3-9]\d{9}$/;
    if (!formData.mobile || !reg.test(formData.mobile)) {
      sheep.$helper.toast('请正确输入手机号');
      return;
    }
    if (!formData.code && formData.code.length !== 4) {
      sheep.$helper.toast('请输入4位数字验证码');
    }
    if (formData.mobile && formData.code) {
      const { code, data } = await AuthUtil.smsLogin(formData);
      if (code === 0) {
        sheep.$helper.toast('注册成功！请下载朱雀兽APP');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .background-image-container {
    background-size: cover;
    background-position: center;
    height: 100vh;
    background: #f9fafd;
  }



  .form-title {
    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-right: 30rpx;
  }

  .m-b-32 {
    margin-bottom: 32rpx;
  }

  .register-btn {
    width: 494rpx;
    height: 100rpx;
    margin-top: 50rpx;
    margin-bottom: 90rpx;
  }

  .register-phone {
    width: 750rpx;
    height: 100rpx;
  }

  .logo {
    width: 308rpx;
    height: 284rpx;
    margin-top: 90rpx;
  }

  .text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #232323;
    line-height: 34rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-align: center;
  }

  .text2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #232323;
    line-height: 34rpx;
    letter-spacing: 4px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 24rpx;
    margin-bottom: 36rpx;
  }
  
  .text3 {
	display: block;
	margin-top: 100rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #232323;
    line-height: 34rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-bottom: 36rpx;
  }

  .form-content {
    position: relative;
    padding-top: 88rpx;
    height: 58rpx;

    .icon {
      margin-left: 24rpx;
      // position: absolute;
      // left: 24rpx;
      // top: 50%;
      // transform: translateY(-50%);
    }

    .title {
      text-align: center;
      font-size: 40rpx;
      color: #232323;
      // padding: 14rpx 0;
    }
  }

  .inputBox {
    border-radius: 52px;
    background: #ffffff;
    font-size: 28rpx;
  }

  .margin {
    margin: 72rpx 0;
  }
</style>
